<template>
  <!-- <div class="dashboard-container"> -->
  <!-- 历史归档组件 el-collapse-item__header-->
  <!-- <div class="app-container"> -->
  <!-- <div style="background-color:#ccc"> -->
  <el-collapse height="300" @change="handleChange(historysList.yearsMonth)">
    <el-collapse-item name="1">
      <!-- 头部 -->
      <div slot="title" class="collapse-title flex">
        <el-row type="flex">
          <div style="font-size:18px;padding:0px 30px 10px 50px;width:280px;border-right:1px solid #CCC;height:60px">
            <div style="height:20px">{{ historysList.yearsMonth }}社保报表<span style="font-size:14px;color:#999;padding-left:20px">未归档</span></div>
            <div style="font-size:16px;margin-top:10px">社保报表</div>
          </div>
          <div style="font-size:18px;padding:0px 30px 10px 40px;border-right:1px solid #CCC;height:60px">
            <div style="height:20px"><span style="font-size:16px;color:#999;">企业缴纳</span></div>
            <div style="font-size:18px;margin-top:10px;font-weight:400">{{ historysList.enterprisePayment }}</div>
          </div>
          <div style="font-size:18px;padding:0px 30px 10px 40px;border-right:1px solid #CCC;height:60px">
            <div style="height:20px"><span style="font-size:16px;color:#999;">个人缴纳</span></div>
            <div style="font-size:18px;margin-top:10px;font-weight:400">{{ historysList.personalPayment }}</div>
          </div>
          <div style="font-size:18px;padding:0px 30px 10px 40px;height:60px">
            <div style="height:20px"><span style="font-size:16px;color:#999;">合计</span></div>
            <div style="font-size:18px;margin-top:10px;font-weight:400">{{ historysList.total }}</div>
          </div>
        </el-row>
      </div>
      <!-- 表格 -->
      <div>
        <comtable :datareport="Datareport" height="300" />
      </div>
    </el-collapse-item>
  </el-collapse>
  <!-- </div> -->
  <!-- </div>
  </div> -->
</template>

<script>
// 引入表格组件
import comtable from './componemt_table'
// 查询月份数据报表
import { getDatareport } from '@/api/social'
export default {
  components: {
    comtable
  },
  props: {
    historysList: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      Datareport: []// 月份数据报表
    }
  },
  methods: {
    // 获取月数据报表
    async handleChange(value) {
      // console.log(value)
      // this.historysList = { ...this.historysList, opType: 2 }
      const res = await getDatareport({ yearMonth: this.historysList.yearsMonth, opType: 2 })
      this.Datareport = [...res]
      // console.log(this.Datareport)
    }
  }
}
</script>

<style lang="scss" scoped>
//将箭头放置左边
.collapse-title {
  flex: 1 0 90%;
  order: 1;
}
.el-collapse-item__header {
  flex: 1 0 auto;
  order: -1;
}
//设置弹性布局一行显示

//修改折叠面板高度
::v-deep .el-collapse-item__header{
  height: 90px;
  border-bottom: 3px solid #cccccc;
}
//三角
::v-deep [data-v-6a5e2f5e] .el-collapse-item__header{
  padding-left: 30px;
}

.col{
  // display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 10px;
  background-color: #cfeffe;
}
.text{
display: flex;
width: 100px;
height: 15px;
justify-content: center;
align-items: center;
}
.flex{
  display: flex;
  // padding-top: 10px;
}
.between{
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-collapse-item__content{
  padding-bottom: 0;
}
</style>
